<script setup>
import { ref } from 'vue';


const form = ref({
  name: '',
  post: '',
  isRead: false,
})
</script>

<template>
  <div class="container">

    <a-form :model="form" size="large" class="table">
      <a-link href="/user/login" class="return" >
        <icon-left />
        返回</a-link>

      <a-form-item field="account" label="账号" validate-trigger="input" required>
        <a-input v-model="form.account" placeholder="请输入账号" />
      </a-form-item>

      <a-form-item field="email" label="邮箱" validate-trigger="input" required>
        <a-input v-model="form.email" placeholder="请输入电子邮箱" />
      </a-form-item>

      <a-form-item field="checkcode" label="邮箱验证码" validate-trigger="input" required>
        <a-input v-model="form.checkcode" placeholder="请输入邮箱验证码" />
      </a-form-item>

      <a-form-item field="password" label="密码" validate-trigger="input" required>
        <a-input-password v-model="form.password" placeholder="请设置新密码" />
      </a-form-item>

      <a-form-item field="repassword" label="确认密码" validate-trigger="input" required>
        <a-input-password v-model="form.repassword" placeholder="请确认密码" />
      </a-form-item>
      <a-button type="primary" class="alter">修改</a-button>
    </a-form>

  </div>
</template>

<style scoped lang="less">
.container {
  background-image: linear-gradient(to right, #a8c0ff, #3f2b96) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.table {
  position: relative;
  max-width: 600px;
  min-width: 400px;
  height: 55%;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
  background-color: #ffffffdc;
  align-items: center;
  padding: 5px 30px 0px 20px;

  // margin-top: 10px;
  :deep(.arco-form-item-label) {
    font-size: 16px;
  }
}

.alter {
  font-size: 18px;
  width: 50%;
  max-width: 600px;
  min-width: 300px
}
.return {
  position: absolute;
  top: 20px;
  left: 25px;
  color: #2f1dd3;
  font-size: 12px;
  
}
</style>